<template>
  <div class="robot-device">
    <myTable
      :columns="columns"
      :dataSource="tableData"
      :total="total"
      @changePagination="getTableList"
    >
      <template slot="deviceName" slot-scope="slotData">
        <div @click="toDetail(slotData.scope)" class="name-box">
          <div>
            {{ slotData.scope.robotTitle ?? "--" }}
          </div>
        </div>
      </template>
      <template #port="slotData">
        {{
          slotData.scope.deviceAddress
            ? "COM" + slotData.scope.deviceAddress
            : "--"
        }}
      </template>

      <template #autoStatus="slotData">
        <a-radio-group
          name="radioGroup"
          v-model="slotData.scope.autoControl"
          @change="(e) => changeAuto(e, slotData.scope)"
        >
          <a-radio :value="0"> 不允许自动控制 </a-radio>
          <a-radio :value="1"> 允许自动控制 </a-radio>
          <a-radio :value="2"> 禁止当天定时启动</a-radio>
        </a-radio-group>
      </template>
      <template slot="operation" slot-scope="slotData">
        <div class="operation-box">
          <a-icon
            type="left-square"
            title="左停机位"
            @click="leftMove(slotData.scope)"
          />
          <a-icon
            type="right-square"
            class="icon-left"
            title="右停机位"
            @click="rightMove(slotData.scope)"
          />
          <a-icon
            type="setting"
            title="全战策略"
            class="icon-left"
            @click="openSetting(slotData.scope)"
          />
          <a-icon
            type="edit"
            class="icon-left"
            title="编辑"
            @click="editOpen(slotData.scope)"
          />
        </div>
      </template>
    </myTable>
    <!-- 机器人全局设置 -->
    <robotSetting
      :currentData="currentData"
      :robotVisible.sync="robotVisible"
      ref="robotSetting"
    ></robotSetting>
    <robotDetail
      :detailDrawer.sync="detailDrawer"
      :currentData="currentData"
      ref="robotdetail"
    ></robotDetail>
    <a-modal
      title="编辑"
      :visible="deviceVisible"
      @ok="deviceEditOk"
      @cancel="deviceEditCancel"
    >
      <a-form-model ref="editForm" :model="editForm" :rules="editRules">
        <a-form-model-item label="机器人名称" prop="robotTitle">
          <a-input v-model="editForm.robotTitle" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import {
  robotQuerylist,
  robotRun,
  resettingRobot,
  robotStop,
  leftPosition,
  rightPosition,
  autoControl,
  setRobotName,
} from "@/api/device";
import robotDetail from "../device-components/robotDetail.vue";
import robotSetting from "./robotSetting.vue";
export default {
  components: { robotDetail, robotSetting },
  data() {
    return {
      columns: [
        {
          title: "名称",
          dataIndex: "deviceTitle",
          width: 120,
          fixed: "left",

          scopedSlots: {
            customRender: "deviceName",
          },
          ellipsis: true,
        },
        {
          title: "设备型号",
          width: 120,
          dataIndex: "robotSn",
        },
        {
          title: "所属电站",
          width: 120,
          dataIndex: "stationName",
        },
        {
          title: "端口",
          width: 120,
          scopedSlots: {
            customRender: "port",
          },
        },
        {
          title: "设备地址",
          width: 120,
          dataIndex: "deviceAddress",
        },
        {
          title: "自动控制状态",
          width: 120,
          dataIndex: "",
          scopedSlots: {
            customRender: "autoStatus",
          },
        },
        {
          title: "操作",
          width: 200,
          scopedSlots: {
            customRender: "operation",
          },
          fixed: "right",
        },
      ],
      tableData: [],
      total: 0,
      currentData: null,
      // 机器人设置弹框
      robotVisible: false,
      getTabName: "",
      detailDrawer: false,
      deviceVisible: false,
      editForm: {
        robotTitle: "",
      },
      editRules: {
        robotTitle: [
          { required: true, message: "请填写机器人名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 打开抽屉详情
    toDetail(data) {
      this.getTabName = `${data.deviceTitle ?? "--"}：${data.robotSn}`;
      this.currentData = data;
      this.detailDrawer = true;
      this.$refs.robotdetail.getDetail(data);
    },
    closeDetailDrawer() {
      this.detailDrawer = false;
    },

    openSetting(data) {
      this.currentData = data;
      this.robotVisible = true;
      // this.$refs.robotSetting.getRobotSet();
    },
    robotStatu(flag, row) {
      if (flag) {
        robotRun({ id: row.id }).then((res) => {
          if (res.code == "000000") {
            this.$message.success(`启动成功`);
            this.getTableList();
          } else {
            this.$message.error(`启动失败`);
          }
        });
      } else {
        robotStop({ id: row.id }).then((res) => {
          if (res.code == "000000") {
            this.$message.success(`关闭成功`);
            this.getTableList();
          } else {
            this.$message.error(`关闭失败`);
          }
        });
      }
    },
    resetRobot(row) {
      resettingRobot({ id: row.id }).then((res) => {
        if (res.code == "000000") {
          this.$message.success(`复位成功`);
          this.getTableList();
        } else {
          this.$message.error(`复位失败`);
        }
      });
    },
    leftMove(row) {
      leftPosition({
        id: row.id,
        left: 0,
      }).then((res) => {
        console.log(res);
      });
    },
    rightMove(row) {
      rightPosition({
        id: row.id,
        right: 1,
      }).then((res) => {
        console.log(res);
      });
    },
    changeAuto(e, item) {
      autoControl({ id: item.id, autoControl: e.target.value }).then((res) => {
        if (res.code == "000000") {
          this.getTableList();
          this.$message.success("设置自动控制状态成功");
        }
      });
      console.log(e, item);
    },
    editOpen(data) {
      this.deviceVisible = true;
      this.editForm.robotTitle = data.robotTitle;
      this.currentData = data;
    },
    // 获取表格数据
    getTableList(pageMsg) {
      let requestPage = {
        page: 1,
        limit: 50,
      };
      if (pageMsg?.page) {
        requestPage.page = pageMsg.page;
        requestPage.limit = pageMsg.pageSize;
      }
      robotQuerylist(requestPage)
        .then((res) => {
          //   res.data?.map((item) => {
          //     item.autoControl = item.autoControl ? item.autoControl : undefined;
          //   });
          this.tableData = res.data;
          this.total = res.count;
        })
        .catch(() => {
          console.log("查询设备异常");
        });
    },

    //
    deviceEditCancel() {
      this.deviceVisible = false;
    },
    deviceEditOk() {
      this.$refs.editForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          setRobotName({
            robotTitle: this.editForm.robotTitle,
            id: this.currentData.id,
          })
            .then((res) => {
              console.log("--------");
              if (res.code == "000000") {
                this.$message.success("修改机器人名称成功");
                this.getTableList();
                this.deviceVisible = false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("--------");
          return false;
        }
      });
    },
  },
  mounted() {
    this.getTableList();
  },
};
</script>
<style lang="less" scoped>
.name-box {
  cursor: pointer;
}
// 操作样式
.operation-box {
  width: 100%;
  padding-left: 15px;
  font-size: 16px;
  i {
    cursor: pointer;
    transition: all 0.5s;
    &:hover {
      color: #048fff;
    }
  }
  .icon-left {
    margin-left: 30px;
  }
}
</style>